<template>
    <div class="strategy-item-box">
        <div class="title-box">
            <div class="title">
                {{ props.title }}
            </div>
            <div v-if="props.showDelete" class="item-delete" @click="deleteStrategy">
                删除
            </div>
        </div>
        <my-cell
            label="投放日期"
            placeholder="请选择"
            :value="formData.dateRangeListLabel"
            @click="showTimePopup"
        />
        <my-cell
            v-if="+formData.mediaType !== 3"
            label="时长频次" placeholder="请选择" :value="formData.durationFrequency"
            readonly
            :show-bottom-line="false"
            @click="showPopup"
        />
        <my-cell
            v-else
            label="投放方式" placeholder="请选择" :value="formData.framePublishMethodLabel"
            readonly
            :show-bottom-line="false"
            @click="showPutPopup"
        />
    </div>
    <FrequencySelecter :is-show="showFrequencyPicker" :duration-frequency="[formData.duration, formData.frequency]" @close="showFrequencyPicker = false" @confirm="frequencyConfirm" />
    <Picker title="投放方式" :is-show="putTypeShow" :columns="putTypeColumns" @close="putTypeShow = false" @confirm="putTypeConfirm"></Picker>
    <van-calendar
        ref="timeRef" v-model:show="showTimePicker" :default-date="initDate" type="range" class="calendar-custom" color="#e60044" row-height="45" confirm-text="确定" :formatter="formatter"
        @select="timeSelect" @confirm="onTimeConfirm"
    >
        <template #title>
            <div class="fe-title">
                <h3>日期选择</h3>
                <img src="@/assets/img/close-popup.png" alt="" @click="showTimePicker=false" />
            </div>
        </template>
        <template #footer>
            <div class="daterange-box">
                <div class="date-item">
                    <div class="date-item-label">
                        开始
                    </div>
                    <div class="date-item-value">
                        {{ dateRangeArr[0] || '' }}
                    </div>
                </div>
                <div class="date-item">
                    <div class="date-item-label">
                        结束
                    </div>
                    <div class="date-item-value">
                        {{ dateRangeArr[1] || '' }}
                    </div>
                </div>
            </div>
            <div>
                <Button type="primary" class="van-button--block van-calendar__confirm" color="#e60044" :disabled="!dateRangeArr[1]" @click="timeConfirmClick">
                    确定
                </Button>
            </div>
        </template>
    </van-calendar>
</template>

<script lang="ts" setup name="StrategyItem">
import { ref, toRefs, watch } from 'vue';
import FrequencySelecter from '@/components/FrequencySelecter/index.vue';
import MyCell from '@/components/MyCell/index.vue';
import Picker from '@/components/DurationSelecter/index.vue';
import { Calendar as VanCalendar, CalendarInstance, CalendarDayItem, Button, Toast } from 'vant';
import { StrategyItemData } from '../strategy.module';
import { getWeek } from '@/utils/index';
import dayjs from 'dayjs';

const props = defineProps<{
    title: string | number;
    showDelete?: boolean;
    // formData: StrategyItemData,
    strategyItem: StrategyItemData;
}>();
const { strategyItem } = toRefs(props);
const formData = ref<StrategyItemData>({
    mediaType: '',
    title: '',
    duration: '',
    frequency: '',
    durationFrequency: '',
    framePublishMethod: '',
    framePublishMethodLabel: '',
    startDate: '',
    endDate: '',
    dateRangeListLabel: '',
    time: ''
});
formData.value = strategyItem.value;

watch(strategyItem, () => {
    formData.value = strategyItem.value;
});

const emit = defineEmits(['deleteStrategy', 'changeFormDate', 'update:strategyItem']);
function deleteStrategy() {
    emit('deleteStrategy');
}

const showTimePicker = ref<boolean>(false);
const showTimePopup = () => {
    showTimePicker.value = true;
};
const timeRef = ref<CalendarInstance>();
const dateRangeArr: string[] = [];
const initDate: Date[] = [new Date(formData.value.startDate),new Date(formData.value.endDate)];
// 日期选择的时候
const timeSelect = (dates:Date[]) => {
    if(dates[0]) {
        dateRangeArr[0] = dayjs(dates[0]).format('YYYY年MM月DD日') + ' ' + getWeek(dates[0]);
    } else {
        dateRangeArr[0] = '';
    }
    if(dates[1]) {
        dateRangeArr[1] = dayjs(dates[1]).format('YYYY年MM月DD日') + ' ' + getWeek(dates[1]);
    } else {
        dateRangeArr[1] = '';
    }
};
timeSelect(initDate);
const onTimeConfirm = (dates: Date[]) =>{
    if(!dates.length) {
        return;
    }
    if(dates[0].getDay() !== 6) {
        return Toast.fail('开始日期必须是周六！');
    }
    if(dates[1].getDay() !== 5) {
        return Toast.fail('结束日期必须是周五！');
    }
    const startDate = dayjs(dates[0]).format('YYYY-MM-DD');
    const endDate = dayjs(dates[1]).format('YYYY-MM-DD');
    formData.value.startDate = startDate;
    formData.value.endDate = endDate;
    const dateRangeListLabel = startDate + '至' + endDate;
    formData.value.dateRangeListLabel = dateRangeListLabel;
    showTimePicker.value = false;
    emit('changeFormDate', { ...props.strategyItem, startDate, endDate, dateRangeListLabel });
};
const timeConfirmClick = () => {
    const dates= timeRef.value?.getSelectedDate();
    if(dates) {
        onTimeConfirm(dates as Date[]);
    }
};

const formatter = (day: CalendarDayItem)=>{
    // const week = day.date?.getDay();
    // if(week !== 6 && week !== 5 || day.date?.getTime() && day.date?.getTime()<(new Date).getTime()){
    //     day.type = 'disabled';
    // }
    if (day.type === 'start') {
        day.topInfo = '开始';
        day.bottomInfo ='';
    } else if (day.type === 'end') {
        day.topInfo = '结束';
        day.bottomInfo ='';
    }
    day.className = 'calender-text-custom';
    return day;
};

const showFrequencyPicker = ref<boolean>(false);
const showPopup = () => {
    showFrequencyPicker.value = true;
};
const frequencyConfirm = (value: string[]) => {
    showFrequencyPicker.value = false;
    const duration = value[0].substring(0,value[0].length-1);
    const frequency = value[1].substring(0,value[1].length-1);
    const durationFrequency = value.join('');
    formData.value.duration = duration;
    formData.value.frequency = frequency;
    formData.value.durationFrequency = durationFrequency;
    emit('changeFormDate', { ...props.strategyItem, duration, frequency, durationFrequency });
};

const putTypeShow = ref<boolean>(false);
const showPutPopup = () => {
    putTypeShow.value = true;
};
const putTypeColumns = [
    {
        text: '一梯一框',
        value: 1,
    },
    {
        text: '一梯两框',
        value: 2,
    },
    {
        text: '包梯',
        value: 3,
    },
];
const putTypeConfirm = (value: { text: string, value: string | number }) => {
    const framePublishMethod = value.value;
    const framePublishMethodLabel = value.text;
    putTypeShow.value = false;
    formData.value.framePublishMethod = framePublishMethod;
    formData.value.framePublishMethodLabel = framePublishMethodLabel;
    emit('changeFormDate', { ...props.strategyItem, framePublishMethod, framePublishMethodLabel });
};
</script>

<style scoped lang="scss">
.strategy-item-box {
    border: 0.5px solid #eeeeee;
    border-radius: 4px;
    padding: 0 12px;
    margin-top: 12px;
    .title-box {
        padding-top: 16px;
        display: flex;
        justify-content: space-between;
    }
    .title {
        font-weight: 600;
        font-size: 14px;
        color: #333333;
    }
    .item-delete {
        font-size: 13px;
        color: #397ff8;
    }
}
.fe-title {
    height: 100%;
    display: flex;
    padding: 0 12px;
    margin-top: 7px;
    align-items: center;

    h3 {
        // font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        text-align: center;
        flex: 1;
        margin-left: 20px;
    }

    img {
        width: 20px;
        height: 20px;
    }
}
</style>
